<template>
  <view>
    <mescroll-uni
      ref="mescrollRef"
      @init="mescrollInit"
      :down="downOption"
      @down="downCallback"
      :up="upOption"
      @scroll="handleScroll"
    >
      <view class="scene scene__bg">
        <view class="scene__one" id="scene1">
          <view class="scene__one__noodles" @click="handleItemClick(0)" />
          <view class="scene__one__title">
            <view class="scene__one__title__txt" />
          </view>
        </view>

        <view class="scene__two" id="scene2">
          <view class="scene__two__noodles" @click="handleItemClick(1)" />
          <view class="scene__two__bird" />
          <view class="scene__two__title">
            <view class="scene__two__title__txt"></view>
          </view>
        </view>

        <view class="scene__three" id="scene3">
          <view class="scene__three__noodles" @click="handleItemClick(2)" />
          <view class="scene__three__title">
            <view class="scene__three__title__txt"></view>
          </view>
        </view>

        <view class="scene__four" id="scene4">
          <view class="scene__four__noodles" @click="handleItemClick(3)" />
          <view class="scene__four__bird" />
        </view>

        <view class="scene__five" id="scene5">
          <view class="scene__five__title">
            <view class="scene__five__title__txt"></view>
          </view>
          <view class="scene__five__noodles2" @click="handleItemClick(4)" />
        </view>

        <view class="scene__six" id="scene6">
          <view class="scene__six__noodles" @click="handleItemClick(5)" />
          <view class="scene__six__bird" />
          <view class="scene__six__title">
            <view class="scene__six__title__txt"></view>
          </view>
        </view>

        <view class="scene__seven" id="scene7">
          <view class="scene__seven__title">
            <view class="scene__seven__title__txt"></view>
          </view>
          <view class="scene__seven__noodles" @click="handleItemClick(6)" />
        </view>

        <view class="scene__eight" id="scene8">
          <view class="scene__eight__title">
            <view class="scene__eight__title__txt"></view>
          </view>
          <view class="scene__eight__noodles" @click="handleItemClick(7)" />
          <view class="scene__eight__bird" />
        </view>
      </view>
      <view
        class="scene__person"
        :class="[positionIndex !== 0 && 'position']"
        :key='key'
        v-if="showPerson"
      >
        <view class="scene__person__cooker cooker__bg" />
        <view class="scene__person__cooker__speak" id="ityped"> </view>
      </view>
    </mescroll-uni>

    <view class="toolbar toolbar__bg">
      <view class="toolbar__item" v-for="(item, index) in showArr" :key="index">
        <image
          :src="
            '/static/images/' +
            (item.isfind ? 'tool__pm0' + (index + 1) : 'tool__empty') +
            '.png'
          "
          mode="scaleToFill"
        />
      </view>
    </view>

    <popup
      v-model="showPopup"
      :title="gameOver ? '寻宝已经结束' : showArr[currentScene].title"
      :txt="gameOver ? overTxt : showArr[currentScene].txt"
      :gameOver="gameOver"
      @close="handleClosePopup"
      :img="'/static/images/pm' + (currentScene + 1) + '.png'"
    />
  </view>
</template>

<script>
import MescrollMixin from '@/components/mescroll-uni/mescroll-mixins.js'
import Popup from '../popup'
export default {
  mixins: [MescrollMixin], // 使用mixin (在main.js注册全局组件)
  props: {
    audioStatus: {
      type: Boolean,
      default: false,
    },
  },
  components: {
    Popup,
  },
  data() {
    return {
      downOption: {
        use: false,
      },
      upOption: {
        use: false,
        onScroll: true,
        isBounce: false,
        toTop: {
          width: 0,
          height: 0,
        },
      },
      key:0,
      scrollHeight: 0,
      scrollStartHeight: 0,
      showArr: [
        {
          title: '番茄鸡蛋面',
          isfind: false,
          show: true,
          scrollTop: null,
          string: ['天下第一门，万国来朝处。洛阳人日常与女皇武则天眺望同一片日出美景。'],
          txt: '鲜红饱满\n茄汁四溢的新疆番茄\n蛋香扑鼻\n金黄优质的纯粮鸡蛋\n打造黄金CP，嗨翻你的味蕾',
          speack: false,
          scrollTopHeight: 0,
        },
        {
          title: '汤大师番茄牛腩面',
          isfind: false,
          show: true,
          scrollTop: null,
          string: ['通天浮屠，号令四海，上通天象，下统万物。康宝宝与你一起来明堂天堂礼佛祈福。'],
          txt: '上等牛腩搭配多汁番茄\n三道重视工序提鲜出香\n带来滋味与火候的碰撞\n呈现一碗大师级的好面',
          speack: false,
        },
        {
          title: '汤大师上汤瑶柱排骨面',
          isfind: false,
          show: true,
          scrollTop: null,
          string: ['到洛邑古城，观神都千年历史，尝一尝正宗的洛阳水席。'],
          txt: '瑶柱、鳞虾等海中珍品\n以小火细炖出回甘鲜香\n再融入老火慢煲靓骨汤\n浓鲜交融而出纯正港味\n呈现一碗大师级好面',
          speack: false,
        },
        {
          title: '汤大师枸杞花胶炖鸡面',
          isfind: false,
          show: true,
          scrollTop: null,
          string: ['宝塔高耸，钟声长鸣。不愧是中国第一古刹！'],
          txt: '珍贵花胶搭配鲜嫩鸡肉\n以炒、焖、炖三道工序出味\n中式烹饪下的地道美味\n呈现一碗大师级好面',
          speack: false,
        },
        {
          title: '汤大师酸酸辣辣叉烧豚骨面',
          isfind: false,
          show: true,
          scrollTop: null,
          string: ['宝塔高耸，钟声长鸣。不愧是中国第一古刹！'],
          txt: '鲜美猪骨熬制浓郁汤头\n精选传统匠造百年香醋\n搭配诱人辣椒食欲大开\n以嗨翻味蕾的蒜香辣爽\n呈现一碗大师级好面',
          speack: true,
        },
        {
          title: '藤椒豚骨面',
          isfind: false,
          show: true,
          scrollTop: null,
          string: ['在气势非凡的龙门石窟。一起观世界艺术之最，感大唐气象之盛。'],
          txt: '精选优质双骨\n大火熬煮浓郁白汤\n低温浓缩精华高汤包\n香醇豚骨搭配\n地道藤椒提香\n椒麻层层入味\n劲道圆面及丰富配料 \n尽释椒香麻爽',
          speack: false,
        },
        {
          title: '汤大师日式叉烧豚骨面',
          isfind: false,
          show: true,
          scrollTop: null,
          string: ['漫步洛阳山水，畅游千年古都。康师傅方便面与旅途更配哦！'],
          txt: '豚鸡双骨特制骨胶汤头\n匠心独具锤炼黄金配比\n从舌尖到齿间浓醇爽口\n呈现一碗大师级好面',
          speack: false,
        },
        {
          title: '红烧牛肉面',
          isfind: false,
          show: true,
          scrollTop: null,
          string: ['国色添香，一面惊鸿。康师傅神都面馆，就在这里啦。'],
          txt: '始于1992年\n 第一碗红烧牛肉面\n醇厚汤汁\n 丰富食材 \n滑嫩劲道\n国民经典 YYDS\n就要这个味',
          speack: false,
        },
      ],
      currentScene: 0,
      showPerson: true,
      showPopup: false,
      gameOver: false,
      first: false,
      positionIndex: 0,
      overTxt:
        '一桶藏乾坤，一面尽江湖\n好面得亲自尝尝\n神都的故事要亲眼看看\n牡丹盛开时节\n康师傅神都面馆在王城公园静候君来\n以面会友,共襄盛举\n今日有缘相见\n神都面馆的神秘宝藏\n就送给大侠了',
    }
  },
  created() {
    this.init()
  },
  watch: {
    showPopup(e) {
      if (e) {
        this.$nextTick(() => {
          $('#title').arctext({
            radius: 210,
          })
        })
      }
    },
  },
  methods: {
    init() {
      this.$nextTick(() => {
        const query = uni.createSelectorQuery().in(this)
        for (let i = 0; i < 8; i++) {
          query
            .select(`#scene${i + 1}`)
            .boundingClientRect((data) => {
              this.showArr[i].scrollTop = data.top + data.height
              this.showArr[i].show = false
            })
            .exec()
        }
      })
    },
    start() {
      setTimeout(() => {
        this.$set(this.showArr, 0, {
          ...this.showArr[0],
          show: true,
        })
        this.person(0)
      })
    },
    handleClosePopup() {
      this.showPopup = !this.showPopup

      if (!this.first && !this.showPopup) {
        const isOver = this.showArr.filter((item) => item.isfind).length === 8
        this.gameOver = isOver
        setTimeout(() => {
          if (isOver) {
            this.first = true
            this.showPopup = true
          }
        }, 300)
      }
    },

    handleShowPopup(index) {
      if (this.showArr[index].isfind) {
        this.noodlesIndex = index
        this.showPopup = true
      }
    },
    handleItemClick(index) {
      this.currentScene = index

      this.$set(this.showArr, index, {
        ...this.showArr[index],
        isfind: true,
        show: true,
      })
      this.handleShowPopup(index)
    },
    person(index) {
      this.$nextTick(() => {
          document.getElementById('ityped').innerHTML = ""
          ityped.init('#ityped', {
            strings: this.gameOver
              ? ['要记得康宝宝与你的洛阳神游之旅哦。']
              : [this.showArr[index].string[0]],
            startDelay: 100,
            typeSpeed: 100,
            backSpeed: -1,
            loop: false,
            showCursor: false,
          })

      })
    },
    debounce(fn, wait) {
      var timer = null
      return function () {
        if (timer !== null) {
          clearTimeout(timer)
        }
        timer = setTimeout(fn, wait)
      }
    },
    handleScrollTop(e) {
      // 补高
      const arr = [320, 300, 300, 300, 500, 400, 300]
      if (this.gameOver) {
        this.$utils.throttle(() => {
          this.showPerson = true
          this.person()
        }, 500)
        return
      } else {
        this.key+=1
        this.$utils.throttle(() => {
          const showArr = this.showArr
          showArr[showArr.length - 1].scrollTop =
            showArr[showArr.length - 2].scrollTop + 10
          const arr = showArr.map((item, index) => item.scrollTop)
          const len = arr.filter((item) => e.scrollTop > item)
          this.positionIndex = e.scrollTop
          if (e.scrollTop <= 0) {
            this.showPerson = true
            this.person(0)
          } else if (
            len.length === 8 ||
            len.length === 7 ||
            (len.length === 6 && arr[arr.length - 1] - e.scrollTop <= 129)
          ) {
            this.showPerson = true
            this.person(7)
          } else if (
            len.length &&
            !this.showArr[len.length]?.speack &&
            e.scrollTop - len[len.length ? len.length - 1 : 0] <= 100
          ) {
            this.showPerson = true
            this.person(len.length)
          }
        }, 500)
      }
    },
    handleScroll(e) {
      this.showPerson = false
      this.$utils.debounce(() => {
        this.handleScrollTop(e)
      }, 80)
    },
    downCallback() {
      console.log(1)
      this.mescroll.endSuccess(10, true)
    },
  },
}
</script>

<style lang="scss" scoped>
.scene {
  overflow: hidden;
  width: 100vw;
  height: 5792rpx;
  position: relative;
  &__one {
    position: absolute;
    top: 278rpx;
    left: 172rpx;

    &__noodles {
      width: 100rpx;
      height: 93rpx;
      transform: rotate(90deg);
      background: url('/static/images/pm_01.png') no-repeat 50% 50%;
      background-size: 100% auto;
      position: relative;
      left: 24rpx;
      top: -20rpx;
    }
    &__title {
      width: 230rpx;
      height: 138rpx;
      background: url('/static/images/title_01.png') no-repeat 50% 50%;
      background-size: 100% auto;
      position: relative;
      left: -16rpx;
      top: 150rpx;
      // opacity: 0;
      // animation: scene_one_title 2s ease 3s forwards;
      transform: rotate(90deg);
      &__txt {
        width: 120rpx;
        height: 40rpx;
        background: url('/static/images/txt7.png') no-repeat 50% 50%;
        background-size: 100% auto;
        margin: auto;
        position: relative;
        top: 20px;
        // opacity: 0;
        // animation: scene_one_title__txt 2s ease 4s forwards;
      }
    }
  }
  &__two {
    position: absolute;
    top: 682rpx;
    left: 172rpx;

    &__noodles {
      width: 65rpx;
      height: 82rpx;
      transform: rotate(90deg);
      background: url('/static/images/pm_02.png') no-repeat 50% 50%;
      background-size: 100% auto;
      position: relative;
      left: 78rpx;
      top: 8rpx;
    }

    &__bird {
      width: 160rpx;
      height: 180rpx;
      transform: rotate(90deg);
      background: url('/static/images/bird_02.png') no-repeat 50% 50%;
      background-size: 100% auto;
      position: relative;
      left: 350rpx;
      top: 122rpx;
      animation: shake 7s linear 0s infinite;
    }
    &__title {
      width: 98rpx;
      height: 200rpx;
      transform: rotate(90deg);
      background: url('/static/images/title_06.png') no-repeat 50% 50%;
      background-size: 100% auto;
      position: relative;
      left: 250rpx;
      top: 94rpx;
      // opacity: 0;
      // animation: scene_two_title 2s ease 4s forwards;
      &__txt {
        width: 38rpx;
        height: 126rpx;
        background: url('/static/images/txt3.png') no-repeat 50% 50%;
        background-size: 100% auto;
        margin: auto;
        position: relative;
        top: 38rpx;
        left: 4rpx;
        // animation: scene_one_title__txt 2s ease 4s forwards;
      }
    }
  }

  &__three {
    position: absolute;
    top: 1506rpx;
    left: 172rpx;
    &__noodles {
      width: 76rpx;
      height: 82rpx;
      transform: rotate(90deg);
      background: url('/static/images/pm_03.png') no-repeat 50% 50%;
      background-size: 100% auto;
      position: relative;
      left: 72rpx;
      top: 12rpx;
    }

    &__title {
      width: 184rpx;
      height: 146rpx;
      transform: rotate(90deg);
      background: url('/static/images/title_01.png') no-repeat 50% 50%;
      background-size: 100% auto;
      position: relative;
      left: 176rpx;
      top: 220rpx;
      // opacity: 0;
      // animation: scene_three_title 3s ease 0s forwards;
      &__txt {
        width: 100rpx;
        height: 35rpx;
        background: url('/static/images/txt5.png') no-repeat 50% 50%;
        background-size: 100% auto;
        margin: auto;
        position: relative;
        top: 46rpx;
        // opacity: 0;
        // animation: scene_three_title_txt 2s ease 3s forwards;
      }
    }
  }

  &__four {
    position: absolute;
    top: 2300rpx;
    left: 320rpx;
    &__noodles {
      width: 76rpx;
      height: 66rpx;
      transform: rotate(90deg);
      background: url('/static/images/pm_04.png') no-repeat 50% 50%;
      background-size: 100% auto;
      position: relative;
      left: 72rpx;
      top: 12rpx;
    }
    &__bird {
      width: 232rpx;
      height: 190rpx;
      transform: rotate(90deg);
      background: url('/static/images/bird_01.png') no-repeat 50% 50%;
      background-size: 100% auto;
      position: relative;
      left: 220rpx;
      top: -20rpx;
      animation: shake 6s linear 0s infinite;
    }
  }
  &__five {
    position: absolute;
    top: 2550rpx;
    left: 320rpx;
    &__title {
      width: 116rpx;
      height: 210rpx;
      transform: rotate(90deg);
      background: url('/static/images/title_04.png') no-repeat 50% 50%;
      background-size: 100% auto;
      position: relative;
      left: 60rpx;
      top: 240rpx;
      // opacity: 0;
      // animation: scene_two_title 2s ease 0s forwards;
      &__txt {
        width: 48rpx;
        height: 98rpx;
        background: url('/static/images/txt4.png') no-repeat 50% 50%;
        background-size: 100% auto;
        margin: auto;
        position: relative;
        top: 60rpx;
        left: 4rpx;
        // opacity: 0;
        // animation: scene_four_title_txt 2s ease 2s forwards;
      }
    }
    &__noodles2 {
      width: 60rpx;
      height: 48rpx;
      transform: rotate(90deg);
      background: url('/static/images/pm_05.png') no-repeat 50% 50%;
      background-size: 100% auto;
      position: relative;
      left: -214rpx;
      top: 78rpx;
    }
  }

  &__six {
    position: absolute;
    top: 3602rpx;
    left: 468rpx;
    padding-top: 330px;
    margin-top: -330px;
    &__noodles {
      width: 76rpx;
      height: 77rpx;
      transform: rotate(90deg);
      background: url('/static/images/pm_06.png') no-repeat 50% 50%;
      background-size: 100% auto;
      position: relative;
      left: 60rpx;
    }
    &__title {
      width: 206rpx;
      height: 150rpx;
      transform: rotate(90deg);
      background: url('/static/images/title_01.png') no-repeat 50% 50%;
      background-size: 100% auto;
      position: relative;
      left: -56rpx;
      top: 46rpx;
      // opacity: 0;

      // animation: scene_three_title 3s ease 0s forwards;
      &__txt {
        width: 110rpx;
        height: 32rpx;
        background: url('/static/images/txt2.png') no-repeat 50% 50%;
        background-size: 100% auto;
        margin: auto;
        position: relative;
        top: 52rpx;
        // opacity: 0;
        // animation: scene_five_title_txt 2s ease 3s forwards;
      }
    }
  }

  &__seven {
    position: absolute;
    top: 4164rpx;
    left: 468rpx;
    padding-top: 230px;
    margin-top: -230px;
    &__noodles {
      width: 76rpx;
      height: 77rpx;
      transform: rotate(90deg);
      background: url('/static/images/pm_07.png') no-repeat 50% 50%;
      background-size: 100% auto;
      position: relative;
      left: -80rpx;
      top: 80rpx;
    }
    &__title {
      width: 128rpx;
      height: 166rpx;
      transform: rotate(90deg);
      background: url('/static/images/title_02.png') no-repeat 50% 50%;
      background-size: 100% auto;
      position: relative;
      left: -20rpx;
      top: 46rpx;
      // opacity: 0;
      // animation: scene_seven_title 3s ease 0s forwards;
      &__txt {
        width: 48rpx;
        height: 137rpx;
        background: url('/static/images/txt1.png') no-repeat 50% 50%;
        background-size: 100% auto;
        margin: auto;
        position: relative;
        top: 18rpx;
        left: 8rpx;
      }
    }
  }

  &__eight {
    position: absolute;
    top: 4616rpx;
    left: 468rpx;
    padding-top: 330px;
    margin-top: -330px;
    &__noodles {
      width: 100rpx;
      height: 923rpx;
      transform: rotate(90deg);
      background: url('/static/images/pm_08.png') no-repeat 50% 50%;
      background-size: 100% auto;
      position: relative;
      left: -354rpx;
      top: 244rpx;
    }
    &__title {
      width: 226rpx;
      height: 144rpx;
      transform: rotate(90deg);
      background: url('/static/images/title_01.png') no-repeat 50% 50%;
      background-size: 100% auto;
      position: relative;
      left: -154rpx;
      top: 482rpx;
      // animation: scene__eight_title 3s ease 0s forwards;
      &__txt {
        width: 120rpx;
        height: 40rpx;
        background: url('/static/images/txt6.png') no-repeat 50% 50%;
        background-size: 100% auto;
        margin: auto;
        position: relative;
        top: 46rpx;
        // animation: scene__eight_title_txt 3s ease 0s forwards;
      }
    }
    &__bird {
      width: 226rpx;
      height: 180rpx;
      transform: rotate(90deg);
      background: url('/static/images/bird_03.png') no-repeat 50% 50%;
      background-size: 100% auto;
      position: relative;
      left: -8rpx;
      top: -508rpx;
      animation: shake 6s ease 0s infinite;
    }
  }

  &__person {
    position: fixed;
    transform: rotate(90deg);
    width: 100rpx;
    height: 151rpx;
    left: 222rpx;
    top: 138rpx;
    animation: scene_person 2s ease 0s forwards;
    &__cooker {
      width: 100rpx;
      height: 151rpx;
      left: 0;
      position: absolute;

      &__speak {
        background: #fff;
        width: 200rpx;
        border-radius: 8rpx;
        padding: 15rpx;
        position: absolute;
        bottom: 154rpx;
        font-size: 24rpx;

        &:after {
          position: absolute;
          display: block;
          width: 0;
          height: 0;
          border-color: transparent;
          border-style: solid;
          content: ' ';
          border-width: 6px;
          bottom: -12rpx;
          margin-left: -6px;
          border-top-width: 0;
          border-bottom-color: #fff;
          left: 86rpx;
          transform: rotate(180deg);
        }
      }
    }
    &.position {
      left: 24rpx;
      top: 40rpx;
    }
  }
}
.toolbar {
  position: fixed;
  left: 0;
  top: 0;
  bottom: 0;
  margin: auto;
  width: 122rpx;
  height: 777.75rpx;
  z-index: 99;

  &__item {
    margin-top: 16rpx;
    display: flex;
    justify-content: center;
    align-items: center;
    &:first-child {
      margin-top: 105rpx;
    }

    image {
      width: 60rpx;
      height: 56rpx;
      transform: rotate(90deg);
    }
    &:nth-child(2),
    &:nth-child(4),
    &:nth-child(3),
    &:nth-child(5),
    &:nth-child(6),
    &:nth-child(7) {
      image {
        width: 50rpx;
        height: 59rpx;
      }
    }
  }
}

</style>
